@charset "UTF-8";
@import "./common.scss";


#page{width: 100%;height: 100%;background:url(../img/list_bg.png) no-repeat; background-size: 100% 100%;  position: absolute; left: 50%; top: 50%;overflow: hidden; transform: translate3d(-50%, -50%, 0px); -webkit-transform: translate3d(-50%, -50%, 0px);-moz-transform: translate3d(-50%, -50%, 0px);}
.swiper-container {margin:0 50px; height: 100%; 
  .swiper-wrapper{
    .swiper-slide{margin-right: 10px;
      .list-con{ background: #fff; height: 3.2rem; position: relative; margin-top: 0.4rem; padding: 10px;
        .state{ width: 0.92rem;height: 0.92rem; position: absolute; right: 0px; top: -10px;
          img{width: 100%;}
        }
        .img{ width: 100%; margin-bottom: 10px;
          img{ width: 100%;}
        }
        .title{ font-size: 14px;}
        .text{ color: #999;}
        .progress{ width: 100%; overflow: hidden; padding: 1px; height: 10px; background: #063b5d; border-top:1px #06141b solid; border-radius: 5px; margin-top: 15px;
          .bar{ height: 100%; float: left; border-radius: 4px;}
          .sty1{ background: url(../img/list_sty_01.png); background-size: auto 100%;}
          .sty2{ background: url(../img/list_sty_02.png); background-size: auto 100%;}
          .sty3{ background: url(../img/list_sty_03.png); background-size: auto 100%;}
          .sty4{ background: url(../img/list_sty_04.png); background-size: auto 100%;}
        }
      }
    }
  }
}

.swiper-button-prev{ background: url(../img/list_left_arr.png) no-repeat; background-size: 100% 100%;}
.swiper-button-next{ background: url(../img/list_right_arr.png) no-repeat; background-size: 100% 100%;}

.isVertical{ width: 100%;
  #page {transform: translate3d(-50%, -50%, 0px) rotate(90deg);}
}